<template>
	<div class="wallet" v-if="walletInfo">
		<div class="card">
			<div class="top">
				<div class="tip">我的余额</div>
				<div class="price">
					<span>￥</span>{{ money.integer }}<span>.{{ money.decimal }}</span>
				</div>
			</div>
			<div class="bottom">
				<div class="left">
					<span class="tip">累计充值</span>
					<span class="price">{{ formatMoney(walletInfo.pay) }}</span>
				</div>
				<div class="right">
					<span class="tip">累计消费</span>
					<span class="price">{{ formatMoney(walletInfo.record) }}</span>
				</div>
			</div>
		</div>

		<div class="list">
			<div class="title">充值记录</div>

			<div class="item" v-for="item in walletInfo.payList" :key="item.id">
				<div class="left">
					<div class="status" :class="{ success: item.status === '1', unpaid: item.status === '0' }">
						{{ item.status_text }}
					</div>
					<div class="desc">{{ item.paytype_text }} / {{ item.name }}</div>
				</div>
				<div class="right">
					<div class="price-box">
						<span class="price origin" v-if="item.originalprice"
							><span>￥</span>{{ item.originalprice }}</span
						>
						<span class="price"><span>￥</span>{{ item.price }}</span>
					</div>
					<div class="time">{{ item.createtime_text }}</div>
				</div>
			</div>
		</div>

		<div class="pay">
			<van-button round block type="primary" native-type="submit" @click="$router.push('/business/pay')">
				充值
			</van-button>
		</div>
	</div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const business = proxy.$cookies.get('business');

const walletInfo = ref(null);

const getData = async () => {
	const res = await proxy.$GET({
		url: '/business/wallet',
		params: { id: business.id },
	});

	console.log(res);

	if (res.code === 0) {
		proxy.$fail(res.msg);
		return;
	}

	walletInfo.value = res.data;
};

const money = computed(() => {
	const res = {
		integer: '0',
		decimal: '00',
	};

	let d = Number(walletInfo.value.money);

	if (walletInfo.value) {
		if (d % 1 !== 0) {
			res.decimal = d.toFixed(2).split('.')[1];
		}

		res.integer = d.toFixed(0);
	}

	return res;
});

const formatMoney = (money) => {
	if (typeof money === 'string') {
		money = Number(money);
	} else if (typeof money !== 'number') {
		return '0.00';
	}

	return money.toFixed(2);
};

getData();
</script>

<style scoped lang="scss">
.wallet {
	overflow: auto;
	height: calc(100vh - 126px);
	.card {
		position: relative;

		.top {
			height: 100px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			background-color: #fff;

			.tip {
				font-size: 13px;
				margin-bottom: 2px;
				color: #555;
			}
			.price {
				font-size: 22px;
				color: #fe7923;
				span {
					font-size: 16px;
				}
			}
		}
		.bottom {
			display: flex;
			& > div {
				margin-top: 4px;
				width: calc(50% - 2px);
				height: 80px;
				background-color: #fff;
				z-index: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				.tip {
					font-size: 11spx;
				}
				.price {
					font-size: 16px;
				}
			}
			.left {
				margin-right: 4px;
			}
		}
	}
	.list {
		margin-top: 10px;
		background-color: #fff;
		.title {
			font-size: 14px;
			padding: 8px 16px;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #eee;
			margin-bottom: 10px;
			&::before {
				content: '';
				display: inline-block;
				background-color: #4373d2;
				width: 4px;
				height: 1em;
				margin-right: 6px;
			}
		}
		.item {
			display: flex;
			justify-content: space-between;
			padding: 4px 0;
			margin: 0 16px;
			background-color: #fff;

			.left {
				.status {
					font-size: 14px;
					font-weight: 700;
					line-height: 30px;
					&.unpaid {
						color: #e6a23c;
					}
					&.success {
						color: #07c160;
					}
				}
				.desc {
					font-size: 12px;
					color: #999;
				}
			}
			.right {
				text-align: end;
				.price-box {
					.price {
						font-size: 14px;
						font-weight: 700;
						line-height: 30px;
						span {
							font-size: 12px;
						}
						&.origin {
							text-decoration: line-through;
							color: #999;
							font-size: 12px;
							margin-right: 6px;
							span {
								font-size: 10px;
							}
						}
					}
				}
				.time {
					color: #999;
					font-size: 12px;
				}
			}
			&:not(:last-child) {
				border-bottom: 1px solid #eee;
			}
		}
	}
	.pay {
		position: fixed;
		bottom: 16px;
		left: 16px;
		width: calc(100% - 32px);
	}
}
</style>
